<template>
  <el-aside width="200px" class="home-page-aside">
    <el-scrollbar>
      <el-menu :router="true" default-active="1">
        <!-- 菜单有子菜单的时候，用el-sub-menu元素渲染
        没有子菜单的时候，用el-menu-item元素渲染 -->
        <template v-for="(item, index) in menus" :key="item.path">
          <el-sub-menu v-if="item.children.length > 0" :index="index + 1 + ''">
            <template #title>{{ item.title }}</template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(chItem, chIndex) in item.children"
                :key="chItem.to"
                :index="`${index + 1}-${chIndex + 1}`"
                :route="chItem.to"
              >
                {{ chItem.title }}
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item v-else :index="index + 1 + ''" :route="item.to">
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script>
import { menus } from "@/router/index";
export default {
  name: "AsideComp",
  data() {
    return {
      menus,
      // routerArr: [
      //   { id: '1', path: '/home/index' },
      //   { id: '2-1',  }
      // ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home-page-aside {
  .el-header {
    position: relative;
  }
  .el-menu {
    border-right: none;
    /* border-right: 1px solid #000; */
  }
}
</style>
